<?xml version='1.0' encoding='UTF-8' ?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

    <pm:page title="Canal">
        <f:facet name="postinit">
            <script type="text/javascript">
                jQuery(document).ready(function(){
                    //Home Page icon
                    //jQuery('head').append('<link rel="apple-touch-icon" href="images/logo.jpg"/>');
                    //Splash screen for iPhone
                    //jQuery('head').append('<link rel="apple-touch-startup-image" href="resources/mail.png"/>');
                    //This will hide the browser address bar
                    jQuery('head').append('<meta name="apple-mobile-web-app-capable" content="yes" />');
                    jQuery('head').append('<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>');
                    //Adds a custom style sheet
                });
            </script>
        </f:facet>
        <!-- Login -->
        <pm:view id="login" swatch="a" rendered="#{not sessionBean.logged}">
            <pm:header title="Login">
            </pm:header>
            <pm:content>
                <p:outputPanel>
                    <h:form>
                        <h:panelGroup>
                            <h:outputText value="El usuario no ha iniciado sesion"/>
                            <p:separator />
                            <p:button value="Regresar" icon="refresh" href="faces/index.xhtml"/>
                        </h:panelGroup>
                    </h:form>
                </p:outputPanel>
            </pm:content>

        </pm:view>
        
        <pm:view id="contactList" swatch="a"  rendered="#{sessionBean.logged}">
            <pm:header title="Contact list">
                <f:facet name="left">
                    <p:button value="Regresar" icon="back" href="faces/index.xhtml"/>
                </f:facet>
            </pm:header>
            <pm:content>
                <p:outputPanel>
                    <h:panelGroup>
                        <h:form id="listContactsForm">
                            <p:dataList id="contactsList" value="#{canalBean.contacts}" var="contact" type="inset">
                                <f:facet name="header">Contacts</f:facet>
                                <p:column>
                                    <p:commandLink value="#{contact.nickname}" action="pm:main" update=":chatForm">
                                        <f:setPropertyActionListener value="#{contact}" target="#{canalBean.userTarget}" />
                                    </p:commandLink>
                                </p:column>
                            </p:dataList>
                        </h:form>
                    </h:panelGroup>
                </p:outputPanel>
            </pm:content>
        </pm:view>

        <!-- Main View -->
        <pm:view id="main" swatch="a" rendered="#{sessionBean.logged}">
            <pm:header title="Canal: #{canalBean.userTarget.nickname}">
                <f:facet name="left">
                    <h:form>
                        <p:commandButton value="Regresar" icon="back" action="pm:contactList" 
                                         actionListener="#{canalBean.clearTarget}"/>
                    </h:form>
                </f:facet>
            </pm:header>
            <pm:content>
                <p:outputPanel id="mainContainer">
                    <h:form id="chatForm">
                        
                        <p:dataTable id="postTable" value="#{canalBean.mainPosts}" var="i" >
                            <p:column headerText="Message">
                                <h:outputText value="#{i.comment}"/>
                                <br/>
                                <br/>
                                <h:outputText value="#{i.fromUser.nickname} - #{i.created}" />
                            </p:column>
                        </p:dataTable>
                        <p:poll update="postTable" stop="#{not canalBean.targetSelected}" interval="10" />
                        
                        <p:separator />

                        <h:inputText value="#{canalBean.post.comment}" styleClass="messageInput" />
                        <p:commandButton value="Send" update="mainContainer" actionListener="#{canalBean.send}"
                                            oncomplete="$('.messageInput').focus();"/>
                    </h:form>
                </p:outputPanel>
            </pm:content>
        </pm:view>

    </pm:page>
    
</f:view>